<template>
  <div class="home">
    <h3>访问state中数据</h3>
    <div>直接获取 {{ $store.state.numA }}</div>
    <div>从data中获取 {{ cnumA }}</div>
    <div>从计算属性中获取 {{ getNumA }}</div>
    <div>通过辅助函数获取 {{ numA }} {{ persons }}</div>
    <h3>访问getters中的数据</h3>
    <div>直接获取{{ $store.getters.fmtNumA }}</div>
    <div>通过辅助函数获取 {{ fmtNumA }}</div>
    <button @click="add">点击添加人信息</button>
    <button @click="add2">点击添加人信息2</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "HomeView",
  data() {
    return {
      cnumA: this.$store.state.numA,
    };
  },
  computed: {
    ...mapState(["numA", "persons"]),
    ...mapGetters(["fmtNumA"]),
    getNumA() {
      return this.$store.state.numA;
    },
  },
  methods: {
    ...mapMutations(["addPerson"]),
    ...mapActions(["asyncAddPerson"]),
    add() {
      //方式一： commit(方法名,参数) 触发mutations
      // this.$store.commit("addPerson", { name: "wang", age: 25 });
      //方式二： 辅助函数 mapMutations
      this.addPerson({ name: "sun", age: 25 });
    },
    add2() {
      //方式一：
      // this.$store.dispatch("asyncAddPerson", { name: "zhao", age: 25 });
      //方式二： 辅助函数
      this.asyncAddPerson({ name: "zhao", age: 25 });
    },
  },
};
</script>
